<template>
  <div>
    <!-- 查询信息 -->
    <el-form :inline="true" :model="searchData" class="demo-form-inline">
      <el-form-item label="关键字">
        <el-input v-model="searchData.Keywords" placeholder="关键字"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="GetMenuList">查询</el-button>
        <el-button type="success" @click="addMenu">添加</el-button>
        <el-button type="danger">批量删除</el-button>
      </el-form-item>
    </el-form>
    <!-- 显示菜单 -->
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="MenuId"
      border
      :default-expand-all="false"
      :tree-props="{ children: 'Children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="" label="菜单Id" sortable width="120">
      </el-table-column>
      <el-table-column prop="MenuName" label="菜单名称" sortable width="120">
      </el-table-column>
      <el-table-column
        prop="MenuType"
        label="菜单类型"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag
            :type="MenuObj.find((m) => m.MenuType == scope.row.MenuType).Style"
          >
            {{ MenuObj.find((m) => m.MenuType == scope.row.MenuType).TypeName }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="RouteName" label="路由名称"> </el-table-column>
      <el-table-column prop="RoutePath" label="路由路径"> </el-table-column>
      <el-table-column prop="ComponentPath" label="组件路径"> </el-table-column>
      <el-table-column prop="Permission" label="权限标识"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="danger"
            size="mini"
            @click="delMenu(scope.row.MenuId)"
            >删除</el-button
          >
          <!-- <el-button
            type="primary"
            size="mini"
            @click="editMenu(scope.row.MenuId)"
            >编辑</el-button
          > -->
          <el-button
            type="primary"
            size="mini"
            @click="editMenu1(scope.row.MenuId)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 树形 -->
    <el-tree
      :data="options"
      :props="defaultProps"
      @node-click="handleNodeClick"
    ></el-tree>
    <!-- 添加弹框 -->
    <el-dialog
      title="添加菜单"
      :visible.sync="dialogFormVisibleAdd"
      v-if="dialogFormVisibleAdd"
    >
      <add-menu ref="add" :menuType="MenuObj" @onAddSuccess="Reload"></add-menu>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
        <el-button type="primary" @click="Save">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑弹框 -->
    <el-dialog
      title="编辑菜单"
      :visible.sync="dialogFormVisibleEdit"
      v-if="dialogFormVisibleEdit"
    >
      <edit-menu
        ref="edit"
        :menuType="MenuObj"
        :menuId="menuId"
        @onAddSuccess="Reload"
      ></edit-menu>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="SaveUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { GetNodes, Delete } from "../../apis/menu";
import AddMenu from "./AddMenu";
import EditMenu from "./EditMenu";
export default {
  //注册组件
  components: {
    AddMenu,
    EditMenu,
  },
  //数据
  data() {
    return {
      options: [],
      defaultProps: {
        children: "Children",
        label: "MenuName",
      },
      menuId: 0,
      dialogFormVisibleAdd: false,
      dialogFormVisibleEdit: false,
      //查询信息
      searchData: {
        Keywords: "",
      },
      tableData: [],
      MenuObj: [
        {
          MenuType: 0,
          TypeName: "目录",
          Style: "success",
        },
        {
          MenuType: 1,
          TypeName: "菜单",
          Style: "warning",
        },
        {
          MenuType: 2,
          TypeName: "按钮",
          Style: "danger",
        },
      ],
    };
  },
  //回调函数
  mounted() {
    this.GetMenuList();
    this.LoadNodes();
  },
  //方法
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    //显示级联
    LoadNodes() {
      GetNodes().then((m) => {
        this.options = m.Data;
      });
    },
    //显示菜单
    GetMenuList() {
      GetNodes(Object.assign(this.searchData)).then((m) => {
        this.tableData = m.Data;
      });
    },
    //关闭添加弹窗并刷新页面
    Reload() {
      this.dialogFormVisibleAdd = false;
      this.dialogFormVisibleEdit = false;
      this.GetMenuList();
    },
    //添加保存
    Save() {
      this.$refs.add.submitForm("ruleForm");
    },
    //修改保存
    SaveUpdate() {
      this.$refs.edit.submitForm("ruleForm");
    },
    //弹出添加对话框
    addMenu() {
      this.dialogFormVisibleAdd = true;
    },
    //弹出修改对话框
    editMenu(menuId) {
      this.menuId = menuId;
      console.log(menuId);
      this.dialogFormVisibleEdit = true;
    },
    editMenu1(id) {
      this.menuId = id;
      this.dialogFormVisibleEdit = true;
    },
    //删除
    delMenu(id) {
      const _this = this;
      this.$confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          Delete({ MenuId: id }).then((res) => {
            if (res.Data) {
              this.$message({
                type: "success",
                message: "删除成功!",
                onClose: function () {
                  _this.Reload();
                },
              });
            } else {
              this.$message.error(res.Message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  //勾子函数
  created() {},
};
</script>
<style>
</style>